<template>
	<div class="front_side_wrapper">
		<div class="img" :page-title="title"></div>
		<div class="wrapper">
			<div class="front_side_box">
				<div class="title">{{ title }}</div>
				<div class="link">
					<router-link v-for="(item, index) in sides" :key="index" :to="item.path">
						<i :class="item.icon" :style="{ color: item.color }"></i>
						<span>{{ item.name }}</span>
					</router-link>
				</div>
			</div>
			<div class="front_body_box">
				<div class="header">
					<i :class="routerData.icon" :style="{ color: routerData.color }"></i>
					<h2>{{ routerData.name }}</h2>
				</div>
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		title: { type: String, default: '' },
		sides: { type: Array, default: () => [] }
	},
	computed: {
		routerData() {
			let path = this.$route.path;
			return this.sides.find((n) => n.path === path);
		}
	}
};
</script>

<style lang="scss" scoped>
.front_side_wrapper {
	margin-bottom: 20px;
	.img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 120px;
		background: url('~@/assets/img/bg_usercenter.png') no-repeat center;
		background-size: cover;
		position: relative;
		margin-bottom: 20px;
	}
	.wrapper {
		display: flex;
		align-items: flex-start;
	}
}
.front_side_box::v-deep {
	width: 260px;
	flex-shrink: 0;
	margin-right: 20px;
	position: relative;
	z-index: 2;
	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		font-size: 24px;
		font-weight: bold;
		height: 72px;
		color: #fff;
		border-bottom: solid 3px #f0bc1d;
		background-color: var(--primary);
	}
	.link {
		display: flex;
		flex-direction: column;
		border-left: solid 1px #e4e7ed;
		border-right: solid 1px #e4e7ed;
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: solid 1px #e4e7ed;
			box-sizing: border-box;
			text-decoration: none;
			transition: all 0.3s;
			font-size: 16px;
			padding: 20px 0;
			line-height: 1;
			color: #303133;
			&:hover {
				color: var(--primary-hover);
			}
			&.router-link-active {
				font-weight: bold;
				color: var(--primary-active);
			}
			i {
				margin-right: 8px;
			}
		}
	}
}
.front_body_box::v-deep {
	flex: 1;
	overflow: hidden;
	border: solid 1px #e4e7ed;
	.header {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 16px;
		background-color: #ecf5ff;
		border-bottom: solid 1px #e4e7ed;
		i {
			font-size: 24px;
			line-height: 1;
		}
		h2 {
			font-size: 20px;
			line-height: 1;
			font-weight: normal;
			margin-left: 10px;
		}
	}
}
@media screen and (max-width: 992px) {
	.front_side_wrapper {
		margin-bottom: 10px;
		.img {
			margin-bottom: 10px;
			&::before {
				display: block;
				position: absolute;
				content: attr(page-title);
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
				font-size: 32px;
				line-height: 1;
				font-weight: bold;
				color: #fff;
				z-index: 1;
			}
		}
		.wrapper {
			align-items: normal;
			flex-direction: column;
		}
	}
	.front_side_box {
		width: 100%;
		.title {
			display: none;
		}
		.link {
			flex-direction: row;
			border: none;
			a {
				padding: 12px 0;
				margin-left: 20px;
				border-bottom: solid 2px transparent;
				i {
					display: none;
				}
				&:first-child {
					margin-left: 0;
				}
				&.router-link-active {
					border-bottom-color: var(--primary-active);
				}
			}
		}
	}
	.front_body_box .header {
		height: 48px;
		i {
			font-size: 18px;
		}
		h2 {
			font-size: 16px;
		}
	}
}
</style>
